import React, { useState, useEffect } from 'react';
import { useSearchParams } from "react-router-dom";
import { LoadingOutlined } from '@ant-design/icons';
import { Spin } from 'antd';
import { indexSearch } from '../../api/indexApi'

import { highlightSearchResult, formatTime, formatNumber } from '../../math'

const antIcon = (
    <LoadingOutlined
        style={{
            fontSize: 24,
        }}
        spin
    />
);

function Voice() {
    // const [searchVal, setSearchVal] = useState([]);
    const [searchpool, setSearchpool] = useState([]);
    const [loading, setLoading] = useState([]);

    const [searchParams] = useSearchParams();

    const s = searchParams.get('s');

    useEffect(() => {
        // console.log(s);
        if (s) {
            setLoading(true)
            indexSearch(s, '2000', 20)
                .then((res) => {

                    if (res.data.data.resources.length > 0) {
                        setSearchpool(res.data.data.resources)
                        console.log(res.data.data.resources);
                        setLoading(false)
                    }
                })
                .catch((err) => {
                    console.error(err)
                    setLoading(false)
                })

            // console.log(searchpool);
        } else {
            setLoading(false)
        }
    }, [s]);

    return (
        <div>
            <div className='count'> 搜索"{s}",找到<span>{searchpool.length}</span>个声音</div>
            <div className='searchresourcecontainer'>
                {
                    !s ? (
                        <div>输入搜索关键字</div>
                    ) : (
                        loading ? (
                            <Spin indicator={antIcon} tip="Loading"><div className='loadingbox'></div></Spin>
                        ) : (
                            searchpool.map((item) => <div key={item.resourceId}>
                                <div className='voiceitem'>
                                    <a className='mk'>
                                        <img src={item.uiElement.image.imageUrl}></img>
                                    </a>
                                    <div className='voiceinfo'>
                                        <p title={item.baseInfo.mainSong.name} className='radioname linka'>{highlightSearchResult(item.baseInfo.mainSong.name, s)}</p>
                                        <span title={item.baseInfo.dj.nickname} className='mainSongname linka'>by <span className='linka'>{highlightSearchResult(item.baseInfo.dj.nickname, s)}</span></span>

                                        {/* 播放次数 */}
                                        <span className='adjustedPlayCount'>{formatNumber(item.baseInfo.adjustedPlayCount)}次播放</span>

                                        {/* 持续时间 */}
                                        <span>{formatTime(item.baseInfo.duration)}</span>
                                    </div>
                                </div>
                            </div>
                            )
                        )
                    )
                }
            </div>
        </div>
    );
}

export default Voice;